<html>
<head>
    <title>Video On Demand for Android Devices</title>
    <style media="screen" type="text/css">
        div.container
        {
            background-color: #ddd;
            margin: 0 0 20px;
            padding: 1px 1px 0;
            width: 360px;
        }

        p
        {
            font: 14px/1.3 Verdana, sans-serif;
        }

            p.back
            {
                bottom: 20px;
                left: 10px;
                position: absolute;
            }

        ul, li, p
        {
            margin: 0;
            padding: 0;
        }

        ul
        {
            list-style: none;
            overflow: hidden;
            padding: 10px 0;
            width: 100%;
        }

        li
        {
            float: left;
        }

            li.play_pause
            {
                padding-left: 10px;
                width: 40px;
            }

            li.time
            {
                text-align: center;
                width: 160px;
            }

            li.volume
            {
                padding-right: 10px;
                width: 100px;
            }

        .control
        {
            color: red;
            cursor: pointer;
        }
    </style>
    <script src="video.js" type="text/javascript"></script>
</head>
<body>
    <h1>Video On Demand for Android Devices</h1>
    <p>Please tap on the video to start playing.</p>

    <div class="container">
        <video id="video" autobuffer width="360" height="240" poster="big_buck_bunny_poster.jpg">
            <!--Old Android devices -->
            <source src="big_buck_bunny.mp4" />
            <source src="big_buck_bunny.m4v" />
            <source src="big_buck_bunny_android.webm" type="video/webm" />
            <source src="big_buck_bunny_android.theora.ogv" type="video/ogg" />
        </video>
        <ul class="controls">
            <li class="play_pause">
                <p class="control" id="play">Play</p>
            </li>
            <li class="time">
                <p><span id="timer">1</span>' of <span id="duration">0</span>'</p>
            </li>
            <li class="volume">
                <p>Vol: <span class="control" id="v-dn" title="Volume down">-</span> / <span class="control" id="v-up" title="Volume up">+</span> <span id="volume">10</span></p>
            </li>
        </ul>
    </div>

    <!--The following script is required to make video work on older Android devices-->
    <!--<script type="text/javascript">
        var video = document.getElementById('video');
        video.addEventListener('click', function () {
            video.play();
        }, false);
    </script>-->
</body>
</html>
